<template>
	<view class="u-page">
		<view class="header"></view>
		<view class="integral_section">
			<view class="checkbox">
			 <uni-data-checkbox mode="tag" v-model="value" :localdata="range" @change="change" selectedColor="#FFE1E2" selectedTextColor="#C7171E"></uni-data-checkbox>
			 </view>
		</view>
		<view class="content">
			<view class="projectList" v-if="lists !=''">
				<block v-for="(item, index) in lists" :key="item.pid">
					<view class="lists" @click="goPage('/pages/project/index?id='+item.pid)">
						<view class="images"><image :src="item.pic" mode=""></image></view>
						<view class="list_contnet">
							<view class="projecttitle ellipsis-sample">{{item.title}}</view>
							<view class="projectinfo ellipsis-2"> {{item.contentInfo}}</view>
						</view>
						<image class="cell-more" src="../../static/icon/cellmore.png" mode=""></image>
					</view>
				</block>
			</view>
			<view class="projectList" v-else>
				<view class="zanwu">暂无内容.</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[],
				value: 1,
				range: [{"value": 1,"text": "股权设立"	},{"value": 2,"text": "股权转让"}]
			}
		},
		async onLoad() {
			this.project();
		},
		methods: {
			async change(e){
				this.value = e.detail.value
				this.project();
			},
			async project(){
				let type= JSON.stringify(this.value)
				const project = await this.GQL({
						"operationName": "allSlProjects",
						"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects(filter: $filter) { nodes { title type tag status pic pid contentInfo } } }",
						"variables": {"filter": {"status": {"equalTo": "1"},"isDelete":{"equalTo": "0"},"type":{"equalTo" : type}}}
				})
				if(project.data.allSlProjects.nodes != ''){
					this.lists = project.data.allSlProjects.nodes
				}
			},
			
			goPage(page){
				uni.navigateTo({
					url:page
				})
			},
		}
	}
</script>

<style lang="scss">
	.u-page{
		background: transparent;
	}
	.header{
			width: 100%;
			height: 200px;
			background: linear-gradient(#C7171E ,#FBFCFE); /* 标准的语法 */
			
		}
		.integral_section{
			position: relative;
			top: -190px;
			margin: 32rpx;
			background-color: #FFFFFF;
			// height: 40px;
			border-radius: 10rpx;
			padding: 24rpx;
			.checkbox{
				margin: 0px 10px;
			}
			.uni-data-checklist .checklist-group .checklist-box.is--tag{
				border-radius: 24rpx;
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 26rpx;
				margin-right: 8rpx;
				&.is-checked{
					border:2rpx solid #FFB4B7!important
				}
			}
		}
		.content{
			position: relative;
			top: -190px;
			margin: 15px;
			background: #FFFFFF;
			// min-height: 450px;
			border-radius: 5px;
			.projectList{
				padding: 10rpx 32rpx;
				box-shadow: 0 20rpx 100rpx 4rpx rgba(55,58,64,0.14);
				.lists{
					// margin: 10px 0px;
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1px solid #f0f0f0;
					position: relative;
					&:last-child{
						border: none;
					}
					height: 168rpx;
					box-sizing: border-box;
					.list_contnet{
						margin-left: 5px;
						width: 450rpx;
						.projecttitle{
							height: 16px;
							overflow: hidden;
							font-size: 30rpx;
							font-weight: 400;
							color: #161E3E;
							line-height: 16px;
						}
						.projectinfo{
							margin: 20rpx 0px;
							font-size: 11px;
							font-weight: 400;
							color: #9BA7C1;
							line-height: 15px;
						}
						
					}
				}
				image{
					border-radius: 10rpx;
					width: 128rpx;
					height: 128rpx;
					margin-right: 20rpx;
				}
				.cell-more{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					bottom: 20rpx;
					right: 0px;
					margin-right: 0rpx;
				}
			}
			.zanwu{
				    text-align: center;
				    padding: 10px;
					font-size: 15px;
					font-weight: 400;
					color: #bbbbbb;
					line-height: 16px;
					min-height: 70vh;
			}
		}
	
</style>
